<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title></title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="/public/clipboard.min.js"></script>
    <style>
    html {
        position: relative;
        min-height: 100%;
    }
    body {
        margin-bottom: 60px;
    }
    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px;
        line-height: 60px;
        background-color: #f5f5f5;
    }
    #app > .container {
        padding: 60px 15px 0;
    }
    code {
        font-size: 80%;
    }
    </style>
  </head>
  <body>
    <div id="app">
        <header>
            <!-- Fixed navbar -->
            <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
                <a class="navbar-brand" href="#">机器管理</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <router-link :to="{name:'alive'}" tag="li"  class="nav-item" active-class="active">
                        <a class="nav-link">机器状态</a> 
                    </router-link >
                    <router-link :to="{name:'sync'}" tag="li"  class="nav-item" active-class="active">
                        <a class="nav-link">数据同步</a>
                    </router-link >
                    <router-link :to="{name:'alertSetting'}" tag="li"  class="nav-item" active-class="active">
                        <a class="nav-link">告警</a>
                    </router-link >
                </ul>
                </div>
            </nav>
        </header>
        <!-- Begin page content -->
        <main role="main" class="container">
            <router-view></router-view>
        </main>
    </div>
    
    <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="/public/filter.js"></script>
    <script src="/public/alive.js"></script>
    <script src="/public/details.js"></script>
    <script src="/public/sync.js"></script>
    <script src="/public/alert.js"></script>
    <script>
        const router =new VueRouter({
            routes: [{
                path:'/alive',component:Alive, name: 'alive'
            },{
              path: '/alive/:id', component:Details, name:'details'
            },{
                path: '/sync', component: Sync, name:"sync"
            },{
                path: '/alert', component: AlertSetting, name:"alertSetting"
            }]
        })
        const app = new Vue({
            router: router,
            el:"#app" 
        })

    </script>
  </body>
</html>
